<!DOCTYPE html>
<html>
<head>
    <include file="public/public_css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/webuploader/css/webuploader.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <include file="public/header-min" />
    <!-- Left side column. contains the logo and sidebar -->
    <include file="public/left" />
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                文章管理
                <a href="javascript:void(0);"><small>添加文章</small></a>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i>首页</a></li>
                <li class="active">内容管理</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- Small boxes (Stat box) -->
            <div class="row">
                <form id="myForm" class="form-horizontal">
                    <div class="form-group">
                        <label for="input0" class="col-sm-2 control-label">文章分类</label>
                        <div class="col-sm-10">
                            <select  name="cat_id" class="form-control" id="input0">
                                <volist name="list" id="vo">
                                    <option value="{$vo.cat_id}">{$vo._name}</option>
                                </volist>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="input1" class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-10">
                            <input name="title" type="text" class="form-control" id="input1" placeholder="文章标题">
                        </div>
                    </div>

                    <div class="form-group">
                            <label  class="col-sm-2 control-label">标签</label>
                            <div class="col-sm-5">
                                <select id="selectTag" name="tag_id" class="form-control">
                                    <option selected>无</option>
                                    <volist name="tagList" id="vo">
                                        <option value="{$vo.tag_id}">{$vo.tag_name}</option>
                                    </volist>
                                </select>
                            </div>
                    </div>
                    <div class="form-group">
                        <label for="input4" class="col-sm-2 control-label">关键词</label>
                        <div class="col-sm-10">
                            <input name="key_word" type="text" class="form-control" id="input4" placeholder="关键词">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="input5" class="col-sm-2 control-label">描述</label>
                        <div class="col-sm-10">
                            <input name="description" type="text" class="form-control" id="input5" placeholder="描述" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="input5" class="col-sm-2 control-label">作者</label>
                        <div class="col-sm-10">
                            <input name="author" type="text" class="form-control" id="input7" placeholder="作者" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="input5" class="col-sm-2 control-label">来源</label>
                        <div class="col-sm-10">
                            <input name="source" type="text" class="form-control" id="input8" placeholder="来源" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">内容</label>
                        <div class="col-sm-10">
                            <script id="container" name="content"  type="text/plain">

                            </script>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="input3" class="col-sm-2 control-label">发布时间</label>
                        <div class="col-sm-10">
                            <input name="add_time" type="text" class="form-control" id="input3" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" placeholder="">
                        </div>
                    </div>

                    <div class="form-group">
                        <label  class="col-sm-2 control-label">配图</label>
                        <div class="col-sm-4">
                            <div id="uploader-demo">
                                <div id="fileList" class="uploader-list"></div>
                                <div id="filePicker">选择图片</div>
                            </div>
                            <input id="thumb" name="thumb" type="hidden" >
                        </div>
                    </div>
                    <div class="form-group">
                    <div class="add-is-show">
                        <volist name="poList" id="vv">
                            <label class="radio-inline">
                                <input type="radio" name="po_id" value="{$vv.po_id}"> {$vv.po_name}
                            </label>
                        </volist>
                    </div>
                </div>
                    <div class="form-group">
                        <div class="add-is-show">
                            <label class="radio-inline">
                                <input name="is_show" type="radio" id="inlineRadio1" value="1" checked> 显示
                            </label>
                            <label class="radio-inline">
                                <input name="is_show" type="radio" id="inlineRadio2" value="0"> 不显示
                            </label>
                        </div>
                    </div>

                    <div class="menu_btn">
                        <button  type="submit" class="btn btn-success" >提交</button>
                    </div>
                </form>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <include file="public/footer" />

    <!-- Control Sidebar -->

    <!-- /.control-sidebar -->
    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<include file="public/public_js" />
<script src="__PUBLIC__/static/js/jquery.form.js"></script>
<script type="text/javascript" src="__PUBLIC__/webuploader/dist/webuploader.min.js"></script>
<script type="text/javascript">
    var ue = UE.getEditor('container');
    // 初始化Web Uploader
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: '/public/webuploader/dist/Uploader.swf',

        // 文件接收服务端。
        server: '{$Think.WEB_PATH}/Admin/Content/upload',
        //设置可上传文件数量
        fileNumLimit: 1,

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
            ),
            $img = $li.find('img');


        // $list为容器jQuery实例

        $('#filePicker').append( $li );
    var thumbnailWidth = 150;
    var thumbnailHeight = 150;
        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
        }

        $percent.css( 'width', percentage * 100 + '%' );
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file, response ) {
        $( '#'+file.id ).addClass('upload-state-done');
        $('#thumb').val(response._raw);

    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas; //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
    });

</script>
<script>

    $('#myForm').submit(function () {
        $(this).ajaxSubmit({
            type : 'POST', //GET,POST
            url: '{$Think.WEB_PATH}/Admin/Content/addArticle',
            dataType : 'json', //xml,json,script，默认为null
            resetForm : true, //成功提交后，重置表单
            success : function (data) {
                layer.open({
                    type: 1,
                    time: 1000,
                    area: ['200px', '200px'],
                    content: data.msg //服务器返回的消息
                });
                setTimeout(function(){
                    window.location.reload();
                },1200);
            },
            error : function (event, errorText, errorType) { //错误时调用
                alert(errorText + errorType);
            }
        });
        return false;
    });

</script>
</body>
</html>
